<template>
  <div class="pokemon-instance">
    <el-page-header @back="router.back()">
      <template #content>
        <span class="pokemon-title">
          {{ pokemon?.name }} Lv.{{ pokemon?.level }}
        </span>
      </template>
    </el-page-header>

    <el-card v-if="pokemon" class="pokemon-card">
      <div class="pokemon-header">
        <el-image :src="pokemon.sprite" :alt="pokemon.name" />
        <div class="pokemon-info">
          <div class="pokemon-types">
            <el-tag
              v-for="type in pokemon.types"
              :key="type"
              :class="['type', type]"
              effect="dark"
            >
              {{ t(`pokedex.types.${type}`) }}
            </el-tag>
          </div>
        </div>
      </div>

      <div class="moves-section">
        <h3>{{ t('team.moves') }}</h3>
        <el-table :data="pokemon.moves" stripe>
          <el-table-column
            prop="name"
            :label="t('pokedex.moves.name')"
          />
          <el-table-column
            prop="power"
            :label="t('pokedex.moves.power')"
            width="100"
          />
          <el-table-column
            prop="accuracy"
            :label="t('pokedex.moves.accuracy')"
            width="100"
          />
          <el-table-column
            prop="type"
            :label="t('pokedex.moves.type')"
            width="120"
          >
            <template #default="{ row }">
              <el-tag
                v-if="row.type"
                :class="['type', row.type]"
                effect="dark"
              >
                {{ t(`pokedex.types.${row.type}`) }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { teamStorage, type TeamPokemon } from '@/utils/team'

const route = useRoute()
const router = useRouter()
const { t } = useI18n()
const pokemon = ref<TeamPokemon | null>(null)

onMounted(() => {
  const team = teamStorage.getTeam()
  pokemon.value = team.find(p => p.id === Number(route.params.id)) || null
  
  if (!pokemon.value) {
    router.push('/team')
  }
})
</script>

<style scoped lang="scss">
.pokemon-instance {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.pokemon-card {
  margin-top: 20px;
}

.pokemon-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  
  .el-image {
    width: 200px;
    height: 200px;
  }
}

.pokemon-info {
  margin-top: 20px;
  text-align: center;
}

.pokemon-types {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.moves-section {
  h3 {
    margin-bottom: 20px;
  }
}

// 继承原有的类型样式
.type {
  &.grass { background-color: #78c850 !important; }
  &.fire { background-color: #f08030 !important; }
  // ... 其他类型样式
}
</style> 